<template>
  <head-five :active-index="activeIndex"></head-five>
  <el-card shadow="always" style="margin: 20px">
    <el-row :gutter="20" class="header">
      <two-table
        :table-data="tableData"
        :options-info="symListInfo"
      ></two-table>
      <paging
        :queryForm="queryForm"
        @my-size-change="handleSizeChange"
        @my-current-change="handleCurrentChange"
      >
      </paging>
    </el-row>
  </el-card>
</template>

<script setup>
import HeadFive from "@/components/header/headFive.vue";
import TwoTable from "@/components/table/twoTable.vue";
import { symListInfo } from "@/api/options/fivePart/symListInfo";
import Paging from "@/components/pagination/paging.vue";
import {onMounted, ref} from "vue";
import { upSlInfo } from "@/api/apiPath/fivePart.js";
import {initTableInfo} from "@/api/methods/initInfo.js";

const activeIndex = "/symList";
const tableData = ref([]);
const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 14,
  totalSize: 0,
});
const init = (query)=> {
  queryForm.value.query = query
  initTableInfo(upSlInfo(queryForm.value), tableData, queryForm)
}
onMounted(()=> {
  init()
})
const handleSizeChange = (pageSize) => {
  queryForm.value.pageSize = pageSize;
  queryForm.value.pageNum = 1;
  init();
};
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  init();
};
</script>

<style scoped>
</style>